/**
 * src/pages/guest/profile/index.tsx
 * ------------------------------------
 * 客人个人中心页面
 * 1. 展示用户基本信息：头像、姓名、积分等
 * 2. 提供身份选择功能（小魏的家人/朋友）
 * 3. 显示亲密度等级与已解锁内容
 * 4. 功能菜单：积分历史、积分规则、设置等
 * 仅客人角色可访问，支持微信登录与快速体验模式
 * 创建日期：2025-08-06
 */
import { View, Text, Button, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useAppContext } from '../../../store'
import './index.scss'

export default function Profile() {
  const { state, dispatch } = useAppContext()

  const handleLogout = () => {
    dispatch({ type: 'LOGOUT' })
    Taro.reLaunch({ url: '/pages/index/index' })
  }

  const handleViewMenu = () => {
    Taro.navigateTo({ url: '/pages/guest/menu/index' })
  }

  const handleViewCart = () => {
    Taro.navigateTo({ url: '/pages/guest/cart/index' })
  }

  const handleViewOrders = () => {
    Taro.navigateTo({ url: '/pages/guest/orders/index' })
  }

  return (
    <View className='profile'>
      <View className='header'>
        <Text className='title'>个人资料</Text>
      </View>
      
      {state.currentUser && (
        <View className='user-info'>
          <View className='avatar-section'>
            <View className='avatar'>
              {state.currentUser.avatar ? (
                <Image src={state.currentUser.avatar} className='avatar-img' />
              ) : (
                <Text className='avatar-text'>{state.currentUser.name.charAt(0)}</Text>
              )}
            </View>
            <Text className='user-name'>{state.currentUser.name}</Text>
          </View>
          
          <View className='info-section'>
            <View className='info-item'>
              <Text className='label'>角色</Text>
              <Text className='value'>{state.currentUser.role === 'guest' ? '客人' : '主厨'}</Text>
            </View>
            
            <View className='info-item'>
              <Text className='label'>积分</Text>
              <Text className='value'>{state.currentUser.points}</Text>
            </View>
            
            <View className='info-item'>
              <Text className='label'>注册时间</Text>
              <Text className='value'>{new Date(state.currentUser.createdAt).toLocaleDateString()}</Text>
            </View>
          </View>
        </View>
      )}
      
      <View className='actions'>
        <Button className='logout-btn' onClick={handleLogout}>
          退出登录
        </Button>
      </View>

      {/* 底部导航栏 */}
      <View className='bottom-nav'>
        <View className='nav-item' onClick={handleViewMenu}>
          <Text className='nav-icon'>🍽️</Text>
          <Text className='nav-text'>菜单</Text>
        </View>
        <View className='nav-item' onClick={handleViewCart}>
          <Text className='nav-icon'>🛒</Text>
          <Text className='nav-text'>购物车</Text>
        </View>
        <View className='nav-item' onClick={handleViewOrders}>
          <Text className='nav-icon'>📋</Text>
          <Text className='nav-text'>订单</Text>
        </View>
        <View className='nav-item active' onClick={() => {}}>
          <Text className='nav-icon'>👤</Text>
          <Text className='nav-text'>我的</Text>
        </View>
      </View>
    </View>
  )
} 